<template>
	<view class="user">
		<view class="avater">
			<view style="display: flex; align-items: center;" @click="toLogin">
				<!-- <image :src="info.info.avatar ?  info.info.avatar : '../../static/defaultAvatar.png'"></image> -->
				 <image :src="info.avatar ? info.avatar+'?v=' +`${ Date.parse(new Date())}` : '../../static/defaultAvatar.png'"></image>
				<view style="margin-left: 10px;">
					<!-- <text>{{ info.info.nick_name ?  info.info.nick_name : '请登录' }}</text> -->
					<text>{{ info.nick_name ?  info.nick_name : '请登录' }}</text>
					<!-- <view class="synchronous">
						<image class="rest" src="@/static/rest.png"></image>
						同步微信消息
					</view> -->
				</view>
			</view>
			<view class="right">
				<!-- <image src="@/static/chat.png"></image> -->
				<uni-icons color="#fff" type="gear-filled" size="25" @click="toEdit"></uni-icons>
			</view>
		</view>
	</view>
	<view class="studyTool">
		<text style="font-size: 20px;font-weight: 700;margin-bottom: 20px;display: block;">学习工具</text>
		<uni-row class="demo-uni-row" :width="nvueWidth">
			<uni-col :span="8">
				<view class="demo-uni-col dark" @click="toCourse">
					<image src="@/static/studyList.png" mode=""></image>
					<view>课程</view>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view class="demo-uni-col light" @click="toActivle">
					<image src="@/static/acticle.png" mode=""></image>
					<view>文章</view>
				</view>
			</uni-col>
			<!-- <uni-col :span="8">
				<view class="demo-uni-col light" @click="toLive">
					<image src="@/static/live.png" mode=""></image>
					<view>直播</view>
				</view>
			</uni-col> -->
			<uni-col :span="8">
				<view class="demo-uni-col light" @click="toExam">
					<image src="@/static/exam.png" mode=""></image>
					<view>考试</view>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import {
		userInfo
	} from '@/stores/userInfo.js';
	import {
		center
	} from '@/api/study.js';
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		onShow() {
			// this.info = userInfo();
			// console.log(this.info,"个人数据");
			center().then(res => {
				this.info = res;
			})
		},
		data() {
			return {
				items: ['学习记录', '学习统计'],
				current: 0,
				active: 0,
				dynamicList: [],
				info: '',
				// infoData:''
			};
		},
		methods: {
			toCourse() {
				uni.redirectTo({
					url: '/pages/course/index'
				})
			},
			toActivle() {
				uni.redirectTo({
					url: '/pages/article/index'
				})
			},
			toExam() {
				uni.redirectTo({
					url: '/pages/exam/index'
				})
			},
			toEdit(){
				uni.navigateTo({
					url:'/pages/edit/editAvatar'
				})
			},
			// toLive() {
			// 	uni.navigateTo({
			// 		url: '/pages/live/index'
			// 	})
			// },
			
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			group(val) {
				this.active = val;
			},
			Class(val) {
				this.active = val;
			},
			
			toLogin() {
				if(this.info.nick_name == ''){
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.user {
		background: #007aff;

		.avater {
			.right {
				// margin-bottom: 30px;
				padding-right: 40rpx;

				image {
					border: none;
					width: 30px;
					height: 30px;
				}
			}

			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20px;

			image {
				border: 3px solid $uni-border-color;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				vertical-align: middle;
				margin: 20px;
				margin-right: 10px;
			}

			text {
				color: #fbfbfd;
				font-size: 24px;
				font-weight: 500;
			}

			.synchronous {
				margin-top: 10px;
				display: flex;
				justify-content: center;
				font-size: 14px;
				align-items: center;
				color: #f1ecf2;
				border: solid 1px $uni-border-color;
				border-radius: 20px;
				width: 130px;
				height: 30px;

				.rest {
					border: 0;
					width: 15px;
					height: 15px;
					margin-left: 2px;
				}
			}
		}

		padding-bottom: 20px;
	}

	.demo-uni-col {
		text-align: center;

		view {
			font-size: 24px;
			font-weight: 700px;
			display: flex;
			height: 40px;
			justify-content: center;
			align-items: center;
		}
	}

	.studyTool {
		margin-top: 10px;
		background-color: #fff;
		padding: 20px;

		.demo-uni-col {
			text-align: center;

			view {
				font-size: 16px;
				font-weight: 400px;
				display: flex;
				height: 20px;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 30px;
				height: 30px;
			}
		}
	}

	.study {
		margin-top: 10px;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;

		text {
			font-size: 17px;
			font-weight: 700;
		}
	}
</style>
